<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>菜单管理</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/index.css}" rel="stylesheet">
    <link th:href="@{/css/config.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/css/jquery.pagination.css}" rel="stylesheet">

</head>

<body>
<!-- nav导航 -->
<div th:replace="common/bar::#header"></div>
<!-- 页面主体 -->
<div class="dh mainbox">
    <!-- 左边菜单 -->
    <div th:replace="common/bar::#menu"></div>
    <!-- 右边主显示部分 -->
    <div class="main-rightbox">
        <div class="mainrightbox">
            <!-- 路径导航 -->
            <ol class="breadcrumb">
                <li><a th:href="@{/}">首页</a></li>
                <li class="active">基础管理</li>
                <li class="active">菜单管理</li>
            </ol>
            <!-- 显示表格 -->
            <div class="main_box">
                <!-- 顶部搜索添加框 -->
                <div class="row">
                    <!-- 搜索框 -->
                    <div class="col-lg-2 col-md-4">
                        <div class="input-group">
                            <input type="text" class="form-control" th:value="${movieName}" placeholder="Search for..."  id="search">
                            <span class="input-group-btn">
                                  <button class="btn btn-default" type="button" onclick="movieSearch()">搜索</button>
                            </span>
                        </div>
                    </div>
                    <div class="col-li-2 col-md-4">
                        <button type="button" class="btn btn-primary adduser"  onclick="addfun()">添加</button>
                    </div>
                </div>
                <!-- 表格显示区域 -->
                <div class="maintab">
                    <table class="table table-striped table-bordered table-hover" id="sample_1">
                        <thead>
                        <tr>
                            <th>Id</th>
                            <th class="">电影名</th>
                            <th class="">英文名</th>
                            <th class="">区域</th>
                            <th class="">类型</th>
                            <th class="">时长</th>
                            <th class="">剧情简介</th>
                            <th class="">评分</th>
                            <th class="">预览图</th>
                            <th class="">想看人数</th>
                            <th class="">上映日期</th>
                            <th class="">创建时间</th>
                            <th class="">操作</th>
                        </tr>
                        </thead>
                        <tbody th:if="${page.getRecords()!=null}">
                        <tr class="odd gradeX" th:each="movie:${page.getRecords()}" >
                            <td th:text="${movie.getId()+''}">1000</td>
                            <td th:text="${movie.getName()}">user-0</td>
                            <td th:text="${movie.englishName}">123456789@qq.col-md-1</td>
                            <td th:text="${movie.area}">女</td>
                            <td th:text="${movie.type}">在线</td>
                            <td th:text="${movie.duration}">在线</td>
                            <td><textarea th:text="${movie.synopsis}" style="height: 100px;width: 200px"></textarea></td>
                            <td th:text="${movie.grade}">在线</td>
                            <td><img th:src="${movie.previewUrl}" style="width: 100px;height: 100px"></td>
                            <td th:text="${movie.watchNumber}">在线</td>
                            <td th:text="${#dates.format(movie.releaseDate,'yyyy-MM-dd')}">在线</td>
                            <td th:text="${#dates.format(movie.createDate,'yyyy-MM-dd HH:mm:ss')}">在线</td>
                            <td>
                                <span class="label label-success cp editmsg" onclick="editfun()">编辑</span>
                                <span class="label label-success cp deletelist deletebgc" th:if="${movie.state==0}" th:onclick="disable([[${movie.getId()+''}]])">禁用</span>
                                <span class="label label-success cp deletelist deletebgc" th:if="${movie.state==1}" th:onclick="enable([[${movie.getId()+''}]])">启用</span>

                            </td>
                        </tr>
                        </tbody>
                        <tbody th:if="${page.getRecords()==null || page.getRecords().size()==0}">
                        <tr class="odd gradeX" rowspan="2">
                            <td colspan="13" style="color: red;text-align: center">未找到相关信息</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <!-- 分页 -->
                <div class="text-center">
                    <div id="pagination3" th:if="${page.getRecords()!=null}" class="page fl"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<!-- 引入公共js文件 -->
<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/js/jquery.slimscroll.min.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/js/jquery.pagination.min.js}"></script>

<script>
    /**
     *  此方法为切换左边菜单的js文件
     */
    $(".list_dt").on("click", function () {
        $('.list_dd').stop();
        $(this).siblings("dt").removeAttr("id");
        if ($(this).attr("id") == "open") {
            $(this).removeAttr("id").siblings("dd").slideUp();
        } else {
            $(this).attr("id", "open").next().slideDown().siblings("dd").slideUp();
        }
    });

    /**
     * 退出登录
     */
    function logout() {
        window.location.href = "login.html";
    };
    /**
     * 此方法为分页插件提供方法
     * 分页功能
     * 参考文档  http://www.jq22.com/jquery-info15113
     */
    $(function () {
        $("#pagination3").pagination({
            currentPage: [[${page.current}]],
            totalPage: [[${page.total%5==0?page.total/5:page.total/5+1}]],
            isShow: true,
            count: 5,
            homePageText: "首页",
            endPageText: "尾页",
            prevPageText: "上一页",
            nextPageText: "下一页",
            callback: function (current) {
                /**
                 * 回调函数，请求数据
                 * current为页面数
                 */
                if ($("#search").val()=="" || $("#search").val()==null){
                    location.href="/movie/moviePagingQuery/"+current;
                }else {
                    location.href="/movie/moviePagingQuery/"+current+"?movieName="+$("#search").val();
                }

            }
        });

        $("#getPage").on("click", function () {
            var info = $("#pagination3").pagination("getPage");
            alert("当前页数：" + info.current + ",总页数：" + info.total);
        });

        $("#setPage").on("click", function () {
            $("#pagination3").pagination("setPage", 1, 10);
        });
    });

    /**
     * 页面挂载数据方法
     */


    function addfun() {
        window.location.href = "/movie/movieAddOrEditor";
    }

    function editfun() {
        window.location.href = "/movieAddOrEditor.html";
    }

    //搜索事件
    function movieSearch() {
        location.href="/movie/moviePagingQuery/[[${page.current}]]?movieName="+$("#search").val();
    }

    //禁用
    function disable(id) {
        location.href="/movie/disable/"+id
    }

    //启用
    function enable(id) {
        location.href="/movie/enable/"+id
    }
</script>
</body>

</html>